<template>
<div>
  <homeMenu/>  
  <div class="home">
    <div class="home-bgimg">
      <img class="img1" src="../assets/home-bg-circle.png" alt="">
    </div>
    <img class="img2" src="../assets/home-bg-star.png" alt="">
    <div class="coming">
      <img src="../assets/NBI-logo.png" alt="">
      <div>{{$t('user.COMINGSOON')}}</div>
      <img class="imgPlant1" src="../assets/home-img-ballgreen.png" alt="">
      <img class="imgPlant2" src="../assets/home-img-ballred.png" alt="">
      <img class="imgPlant3" src="../assets/home-img-ballorange.png" alt="">
    </div>
    <div class="box">
      <div class="box-flex magrinbo48">
        <div>{{$t('user.Price')}}</div>
        <div>0.00 $/NBI</div>
      </div>
      <div class="box-flex magrinbo48">
        <div>{{$t('user.NBIcurrency')}}</div>
        <div>0</div>
      </div>
      <div class="box-flex">
        <div>{{$t('user.NBIrewards')}}</div>
        <div>0 NBI</div>
      </div>
    </div>
      <div class="bottom-icon top670">
        <a target="_blank" href="https://t.me/newbest_Asia">
          <img src="../assets/bottom-icon-telegram.png" alt="">
        </a>
        <a target="_blank" href="https://twitter.com/NewBestAsia1">
          <img src="../assets/bottom-icon-twitter.png" alt="">
        </a>
        <a target="_blank" href="https://medium.com/@nbcfancs">
          <img src="../assets/bottom-icon-medium.png" alt="">
        </a>
      </div>
  </div>
</div>
</template>

<script>
import homeMenu from './public/homeMenu'
import homeFooter from './public/homeFooter'
export default {
  name: 'homePage',
  data () {
    return {
    }
  },
  components:{
    homeFooter,
    homeMenu
  }, 
  mounted() {
    if(!localStorage.getItem('languageSet')){
      localStorage.setItem('languageSet','en');
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @media only screen and (min-width: 0px) and (max-width: 639px){
    .bottom-icon{
        width: 100px;
        height: 20px;
        left: calc(50% - 50px);
        position: absolute;
        display: flex;
        justify-content: space-around;
        bottom: 87px;
        img{
          width: 20px;
        }
      }
    .home{
      /* position: absolute;
      top: 0px; */
      width: 100%;
      /* z-index: -1; */
      overflow: hidden;
      .home-bgimg{
        width: 750px;
        margin-left: calc(50% - 375px);
        position: relative;
      }
      img{
        width: 100%;
      }
      .img1{
        width: 375px;
        transform: scale(2);
      }
      .img2{
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .imgPlant1{
        width: 30px;
        position: absolute;
        top: 51px;
        left: 20px;
        animation:rotate1 5s linear infinite;
      }
      .imgPlant2{
        width: 30px;
        position: absolute;
        top: 51px;
        left: 20px;
        animation:rotate2 6s linear infinite;
      }
      .imgPlant3{
        width: 30px;
        position: absolute;
        top: 51px;
        left: 20px;
        animation:rotate3 7s linear infinite;
      }
      @keyframes rotate1{
        from {
          transform: rotate(0deg) translate(111px,118px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(111px,118px) rotate(-360deg);
        }
      }
      @keyframes rotate2{
        from {
          transform: rotate(0deg) translate(0px,110px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(0px,110px) rotate(-360deg);
        }
      }
      @keyframes rotate3{
        from {
          transform: rotate(0deg) translate(0px,68px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(0px,68px) rotate(-360deg);
        }
      }
      .coming{
        width: 70px;
        position: absolute;
        top: 120px;
        left: calc(50% - 35px);
        font-size: 24px;
        color: #FEDE50;
      }
      .box{
        position: absolute;
        top: 322px;
        width: 316px;
        left: calc(50% - 158px);
        padding: 30px 40px;
        background-color: #101010;
        border-radius: 10px;
        >.box-flex{
          /* display: flex;
          justify-content: space-between; */
          text-align: left;
          >div:nth-child(1){
            font-size: 16px;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 10px;
          }
          >div:nth-child(2){
            font-size: 20px;
          }
        }
        >.magrinbo48{
          margin-bottom: 30px;
        }
      }
    }
  }
  @media only screen and (min-width: 639px){
    .bottom-icon{
        width: 100px;
        height: 20px;
        left: calc(50% - 50px);
        position: absolute;
        display: flex;
        justify-content: space-around;
        top: 1000px;
        img{
          width: 20px;
        }
      }
    .home{
      position: absolute;
      top: 0px;
      width: 1200px;
      margin: 0 auto;
      left: calc(50% - 600px);
      z-index: -1;
      img{
        width: 100%;
      }
      .img1{
        position: absolute;
        top: -266px;
        left: 0px;
      }
      .img2{
        position: absolute;
        left:0px;
        top: 300px;
      }
      .imgPlant1{
        width: 41px;
        position: absolute;
        top: 55px;
        left: 29px;
        animation:rotate1 5s linear infinite;
      }
      .imgPlant2{
        width: 41px;
        position: absolute;
        top: 55px;
        left: 29px;
        animation:rotate2 6s linear infinite;
      }
      .imgPlant3{
        width: 41px;
        position: absolute;
        top: 55px;
        left: 29px;
        animation:rotate3 7s linear infinite;
      }
      @keyframes rotate1{
        from {
          transform: rotate(0deg) translate(229px,118px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(229px,118px) rotate(-360deg);
        }
      }
      @keyframes rotate2{
        from {
          transform: rotate(0deg) translate(133px,118px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(133px,118px) rotate(-360deg);
        }
      }
      @keyframes rotate3{
        from {
          transform: rotate(0deg) translate(0px,110px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translate(0px,110px) rotate(-360deg);
        }
      }
      .coming{
        width: 100px;
        position: absolute;
        top: 258px;
        left: 550px;
        font-size: 24px;
        color: #FEDE50;
      }
      .box{
        position: absolute;
        top: 608px;
        width: 654px;
        left: calc(50% - 322px);
        padding: 30px 40px;
        background-color: #101010;
        border-radius: 10px;
        >.box-flex{
          display: flex;
          justify-content: space-between;
          >div:nth-child(1){
            font-size: 16px;
            color: rgba(255, 255, 255, .7);
          }
          >div:nth-child(2){
            font-size: 24px;
          }
        }
        >.magrinbo48{
          margin-bottom: 38px;
        }
      }
    }
  }
</style>
